<template>
	<view class="su-picker">
		<view class="mask" :class="{ show: showPicker }" @tap="maskTap" @touchmove.stop.prevent catchtouchmove="true"></view>
		<view class="su-picker-cnt" :class="{ show: showPicker }">
			<view class="su-picker-hd" @touchmove.stop.prevent catchtouchmove="true">
				<view class="su-picker-btn cancel" @tap="pickerCancel">取消</view>
				<view class="su-picker-btn" :style="{ color: themeColor }" @tap="pickerConfirm">确定</view>
			</view>
			<view class="su-picker-view" v-if="mode == 'linkage'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column v-for="(col, colIndex) in data" :key="colIndex">
						<view class="su-picker-item" v-for="(item, index) in col" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'half'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.months" :key="index">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.days" :key="index">{{ item }}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.areas" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'date'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.months" :key="index">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.days" :key="index">{{ item }}日</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'yearMonth'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.months" :key="index">{{ item }}月</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'dateTime'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.months" :key="index">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.days" :key="index">{{ item }}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.hours" :key="index">{{ item }}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.minutes" :key="index">{{ item }}分</view>
					</picker-view-column>
					<picker-view-column v-if="showSeconds">
						<view class="su-picker-item" v-for="(item, index) in data.seconds" :key="index">{{ item }}秒</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'range'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.fyears" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.fmonths" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.fdays" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item">-</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.tyears" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.tmonths" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.tdays" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'time'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.hours" :key="index">{{ item }}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.minutes" :key="index">{{ item }}分</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.seconds" :key="index">{{ item }}秒</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'region'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.provinces" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.citys" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column v-if="!hideArea">
						<view class="su-picker-item" v-for="(item, index) in data.areas" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'selector'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data" :key="index">{{ item.label }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'mlabel'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item su-picker-item2" v-for="(item, index) in data" :key="index">
							<text>{{ item.label }}</text>
							<text style="padding-left: 30rpx;">{{ item.value }}</text>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'limit'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.date" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.hours" :key="index">{{ item.label }}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.minutes" :key="index">{{ item.label }}分</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="su-picker-view" v-if="mode == 'limitHour'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd" immediate-change>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.date" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.areas" :key="index">{{ item.label }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="su-picker-item" v-for="(item, index) in data.hours" :key="index">{{ item.label }}时</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
import provinces from './city-data/province.js';
import citys from './city-data/city.js';
import areas from './city-data/area.js';
import initPicker from './picker.js';

function oneOf(value, validList) {
	for (let i = 0; i < validList.length; i++) {
		if (value === validList[i]) {
			return true;
		}
	}
	throw new Error('mode无效，请选择有效的mode!');
	return false;
}
export default {
	data() {
		return {
			result: [],
			data: {},
			checkArr: [],
			checkValue: [],
			pickVal: [],
			showPicker: false,
			resultStr: '',
			itemHeight: `height: ${uni.upx2px(88)}px;`,
			confirmFlag: true
		};
	},
	computed: {},
	props: {
		mode: {
			type: String,
			validator(mode) {
				let modeList = ['half', 'date', 'dateTime', 'yearMonth', 'time', 'region', 'selector', 'limit', 'limitHour', 'range', 'linkage', 'mlabel']; //过滤无效mode;
				return oneOf(mode, modeList);
			},
			default() {
				return 'date';
			}
		},
		themeColor: {
			type: String,
			default() {
				return "#2999FB";
			}
		},
		startYear: {
			type: [String, Number],
			default() {
				return '1970';
			}
		},
		endYear: {
			type: [String, Number],
			default() {
				return new Date().getFullYear() + '';
			}
		},
		defaultVal: {
			type: Array,
			default() {
				return [0, 0, 0, 0, 0, 0, 0];
			}
		},
		areaCode: {
			type: Array,
			default() {
				return null;
			}
		},
		hideArea: {
			//隐藏省市区三级联动   地区列
			type: Boolean,
			default: false
		},
		step: {
			type: [String, Number],
			default: 1
		},
		current: {
			type: Boolean,
			default: false
		},
		selectList: {
			type: Array,
			default() {
				return [];
			}
		},
		//以下参数仅对mode==limit有效
		dayStep: {
			type: [String, Number],
			default: 7
		},
		startHour: {
			type: [String, Number],
			default: 8
		},
		endHour: {
			type: [String, Number],
			default: 20
		},
		minuteStep: {
			type: [String, Number],
			default: 10
		},
		afterStep: {
			type: [String, Number],
			default: 30
		},
		disabledAfter: {
			type: Boolean,
			default: false
		},
		linkList: {
			type: Array,
			default() {
				return [];
			}
		},
		value: {
			type: Array,
			default() {
				return null;
			}
		},
		level: {
			type: [Number, String],
			default: 2
		},
		timeout: {
			type: Boolean,
			default: false
		},
		showSeconds: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		mode() {
			this.initData();
		},
		selectList() {
			this.initData();
		},
		linkList() {
			this.initData();
		}
	},
	methods: {
		touchStart() {
			if (this.timeout) {
				this.confirmFlag = false;
			}
		},
		touchEnd() {
			if (this.timeout) {
				setTimeout(() => {
					this.confirmFlag = true;
				}, 500);
			}
		},
		getLinkageVal(value, flag) {
			let dval = [];
			let arr = value;
			let list = this.linkList;
			let lev = this.level;
			let k = 0;
			let checkArr = [];
			let checkValue = [];
			let resultStr = '';
			let data = [];
			switch (lev) {
				case 2:
					dval = [0, 0];
					break;
				case 3:
					dval = [0, 0, 0];
					break;
			}
			const getData = (obj, key, str) => {
				if (key < lev) {
					data.push(obj);
					if (arr.length == 7) {
						let item = obj[0];
						checkArr.push(item.label);
						checkValue.push(item.value);
						resultStr += item.label;
						if (item.children) {
							getData(item.children, (key += 1));
						}
					} else {
						obj.map((v, j) => {
							if (flag ? v.value == arr[key] : v.label == arr[key]) {
								dval[key] = j;
								checkArr.push(v.label);
								checkValue.push(v.value);
								resultStr += v.label;
								if (v.children) {
									getData(v.children, (key += 1));
								}
							}
						});
					}
					return {
						data,
						dval,
						checkArr,
						checkValue,
						resultStr
					};
				} else {
					return false;
				}
			};
			return getData(list, k);
		},
		getRegionVal(value, useCode) {
			let province = value[0];
			let city = value[1];
			let a = 0,
				b = 0,
				c = 0,
				dval = [];
			let _this = this;
			provinces.map((v, k) => {
				if (useCode ? v.value == province : v.label == province) {
					a = k;
				}
			});
			citys[a].map((v, k) => {
				if (useCode ? v.value == city : v.label == city) {
					b = k;
				}
			});
			if (!_this.hideArea) {
				let area = value[2];
				areas[a][b].map((v, k) => {
					if (useCode ? v.value == area : v.label == area) {
						c = k;
					}
				});
				dval = [a, b, c];
			} else {
				dval = [a, b];
			}
			return dval;
		},
		useCurrent() {
			let aToday = new Date();
			let tYear = aToday.getFullYear().toString();
			let tMonth = this.formatNum(aToday.getMonth() + 1).toString();
			let tDay = this.formatNum(aToday.getDate()).toString();
			let tHours = this.formatNum(aToday.getHours()).toString();
			let tMinutes = this.formatNum(aToday.getMinutes()).toString();
			let tSeconds = this.formatNum(aToday.getSeconds()).toString();
			if (this.current) {
				return [tYear, tMonth, tDay, tHours, (Math.floor(tMinutes / this.step) * this.step).toString(), tSeconds];
			} else {
				return this.defaultVal;
			}
		},
		formatNum(num) {
			return num < 10 ? '0' + num : num + '';
		},
		maskTap() {
			this.$emit('cancel', {
				checkArr: this.checkArr,
				defaultVal: this.pickVal
			});
			this.showPicker = false;
		},
		show() {
			this.showPicker = true;
		},
		hide() {
			this.showPicker = false;
		},
		pickerCancel() {
			this.$emit('cancel', {
				checkArr: this.checkArr,
				defaultVal: this.pickVal
			});
			this.showPicker = false;
		},
		pickerConfirm(e) {
			if (!this.confirmFlag) {
				return;
			}
			switch (this.mode) {
				case 'range':
					let checkArr = this.checkArr;
					let fDateTime = new Date(checkArr[0], checkArr[1], checkArr[2]);
					let tDateTime = new Date(checkArr[3], checkArr[4], checkArr[5]);
					let dVal = this.pickVal;
					if (fDateTime > tDateTime) {
						this.checkArr = [checkArr[3], checkArr[4], checkArr[5], checkArr[0], checkArr[1], checkArr[2]];
						this.pickVal = [dVal[4], dVal[5], dVal[6], 0, dVal[0], dVal[1], dVal[2]];
						this.$emit('confirm', {
							checkArr: this.checkArr,
							from: checkArr[3] + '-' + checkArr[4] + '-' + checkArr[5],
							to: checkArr[0] + '-' + checkArr[1] + '-' + checkArr[2],
							defaultVal: this.pickVal,
							result: this.resultStr
						});
					} else {
						this.$emit('confirm', {
							checkArr: this.checkArr,
							from: checkArr[0] + '-' + checkArr[1] + '-' + checkArr[2],
							to: checkArr[3] + '-' + checkArr[4] + '-' + checkArr[5],
							defaultVal: this.pickVal,
							result: this.resultStr
						});
					}
					break;
				case 'limit':
					let aTime = new Date().getTime();
					let bTime = new Date(this.resultStr.replace(/-/g, '/')).getTime();
					if (aTime > bTime) {
						uni.showModal({
							title: '提示',
							content: '选择时间必须大于当前时间',
							confirmColor: this.themeColor
						});
						return;
					}
					this.$emit('confirm', {
						checkArr: this.checkArr,
						defaultVal: this.pickVal,
						result: this.resultStr
					});
					break;
				case 'region':
				case 'linkage':
					this.$emit('confirm', {
						checkArr: this.checkArr,
						checkValue: this.checkValue,
						defaultVal: this.pickVal,
						result: this.resultStr
					});
					break;
				default:
					this.$emit('confirm', {
						checkArr: this.checkArr,
						defaultVal: this.pickVal,
						result: this.resultStr
					});
					break;
			}
			this.showPicker = false;
		},
		bindChange(val) {
			let _this = this;
			let arr = val.detail.value;
			let year = '',
				month = '',
				day = '',
				hour = '',
				minute = '',
				second = '',
				note = [],
				province,
				city,
				area;
			let checkArr = _this.checkArr;
			let days = [];
			let months = [];
			let mode = _this.mode;
			let col1, col2, col3, d, a, h, m;
			let xDate = new Date().getTime();
			switch (mode) {
				case 'limitHour':
					col1 = _this.data.date[arr[0]];
					col2 = _this.data.areas[arr[1]];
					col3 = _this.data.hours[arr[2]];
					if (col1.value != checkArr[0].value) {
						arr[1] = 0;
						arr[2] = 0;
						let areas = initPicker.limitHour.initAreas(col1);
						_this.data.areas = areas;
						let hours = initPicker.limitHour.initHours(col1, _this.data.areas[arr[1]]);
						_this.data.hours = hours;
					}
					if (col2.value != checkArr[1].value) {
						arr[2] = 0;
						let hours = initPicker.limitHour.initHours(col1, _this.data.areas[arr[1]]);
						_this.data.hours = hours;
					}
					d = _this.data.date[arr[0]] || _this.data.date[_this.data.date.length - 1];
					a = _this.data.areas[arr[1]] || _this.data.areas[_this.data.areas.length - 1];
					h = _this.data.hours[arr[2]] || _this.data.hours[_this.data.hours.length - 1];
					_this.checkArr = [d, a, h];
					_this.resultStr = `${d.value + ' ' + a.label + ' ' + h.label + '时'}`;
					break;
				case 'limit':
					col1 = _this.data.date[arr[0]];
					col2 = _this.data.hours[arr[1]];
					if (col1.value != checkArr[0].value) {
						let hours = initPicker.limit.initHours(_this.startHour, _this.endHour, _this.minuteStep, _this.afterStep, col1.value);
						let minutes = initPicker.limit.initMinutes(_this.startHour, _this.endHour, _this.minuteStep, _this.afterStep, col1.value, col2.value);
						_this.data.hours = hours;
						_this.data.minutes = minutes;
					}
					if (col2.value != checkArr[1].value) {
						let minutes = initPicker.limit.initMinutes(_this.startHour, _this.endHour, _this.minuteStep, _this.afterStep, col1.value, col2.value);
						_this.data.minutes = minutes;
					}
					d = _this.data.date[arr[0]] || _this.data.date[_this.data.date.length - 1];
					h = _this.data.hours[arr[1]] || _this.data.hours[_this.data.hours.length - 1];
					m = _this.data.minutes[arr[2]] || _this.data.minutes[_this.data.minutes.length - 1];
					_this.checkArr = [d, h, m];
					_this.resultStr = `${d.value + ' ' + h.value + ':' + m.value + ':' + '00'}`;
					break;
				case 'range':
					let fyear = _this.data.fyears[arr[0]] || _this.data.fyears[_this.data.fyears.length - 1];
					let fmonth = _this.data.fmonths[arr[1]] || _this.data.fmonths[_this.data.fmonths.length - 1];
					let fday = _this.data.fdays[arr[2]] || _this.data.fdays[_this.data.fdays.length - 1];
					let tyear = _this.data.tyears[arr[4]] || _this.data.tyears[_this.data.tyears.length - 1];
					let tmonth = _this.data.tmonths[arr[5]] || _this.data.tmonths[_this.data.tmonths.length - 1];
					let tday = _this.data.tdays[arr[6]] || _this.data.tdays[_this.data.tdays.length - 1];
					if (fyear != checkArr[0]) {
						days = initPicker.range.initDays(fyear, fmonth);
						_this.data.fdays = days;
					}
					if (fmonth != checkArr[1]) {
						days = initPicker.range.initDays(fyear, fmonth);
						_this.data.fdays = days;
					}
					if (tyear != checkArr[3]) {
						days = initPicker.range.initDays(tyear, tmonth);
						_this.data.tdays = days;
					}
					if (tmonth != checkArr[4]) {
						days = initPicker.range.initDays(tyear, tmonth);
						_this.data.tdays = days;
					}
					_this.checkArr = [fyear, fmonth, fday, tyear, tmonth, tday];
					_this.resultStr = `${fyear + '-' + fmonth + '-' + fday + '至' + tyear + '-' + tmonth + '-' + tday}`;
					break;
				case 'half':
					year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
					month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
					day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
					area = _this.data.areas[arr[3]] || _this.data.areas[_this.data.areas.length - 1];
					if (year != checkArr[0]) {
						months = initPicker.date.initMonths(year, _this.disabledAfter);
						days = initPicker.date.initDays(year, month, _this.disabledAfter);
						if (_this.disabledAfter) {
							arr[1] = arr[1] > months.length - 1 ? months.length - 1 : arr[1];
							arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
							month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
							day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
						}
						_this.data.days = days;
						_this.data.months = months;
					}
					if (month != checkArr[1]) {
						days = initPicker.date.initDays(year, month, _this.disabledAfter);
						arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
						day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
						_this.data.days = days;
					}
					_this.checkArr = [year, month, day, area];
					_this.resultStr = `${year + '-' + month + '-' + day + area.label}`;
					break;
				case 'date':
					year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
					month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
					day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
					if (year != checkArr[0]) {
						months = initPicker.date.initMonths(year, _this.disabledAfter);
						days = initPicker.date.initDays(year, month, _this.disabledAfter);
						if (_this.disabledAfter) {
							arr[1] = arr[1] > months.length - 1 ? months.length - 1 : arr[1];
							arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
							month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
							day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
						}
						_this.data.days = days;
						_this.data.months = months;
					}
					if (month != checkArr[1]) {
						days = initPicker.date.initDays(year, month, _this.disabledAfter);
						arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
						day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
						_this.data.days = days;
					}
					_this.checkArr = [year, month, day];
					_this.resultStr = `${year + '-' + month + '-' + day}`;
					break;
				case 'yearMonth':
					year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
					month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
					if (year != checkArr[0]) {
						if (_this.disabledAfter) {
							arr[1] = arr[1] > months.length - 1 ? months.length - 1 : arr[1];
							month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
						}
						months = initPicker.date.initMonths(year, _this.disabledAfter);
						_this.data.months = months;
					}
					_this.checkArr = [year, month];
					_this.resultStr = `${year + '-' + month}`;
					break;
				case 'dateTime':
					year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
					month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
					day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
					hour = _this.data.hours[arr[3]] || _this.data.hours[_this.data.hours.length - 1];
					minute = _this.data.minutes[arr[4]] || _this.data.minutes[_this.data.minutes.length - 1];
					second = _this.data.seconds[arr[5]] || _this.data.seconds[_this.data.seconds.length - 1];
					if (year != checkArr[0]) {
						arr[2] = 0;
						days = initPicker.date.initDays(year, month);
						day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
						_this.data.days = days;
					}
					if (month != checkArr[1]) {
						arr[2] = 0;
						days = initPicker.date.initDays(year, month);
						day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
						_this.data.days = days;
					}
					_this.checkArr = [year, month, day, hour, minute, second];
					_this.resultStr = `${year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second}`;
					break;
				case 'time':
					hour = _this.data.hours[arr[0]] || _this.data.hours[_this.data.hours.length - 1];
					minute = _this.data.minutes[arr[1]] || _this.data.minutes[_this.data.minutes.length - 1];
					second = _this.data.seconds[arr[2]] || _this.data.seconds[_this.data.seconds.length - 1];
					_this.checkArr = [hour, minute, second];
					_this.resultStr = `${hour + ':' + minute + ':' + second}`;
					break;
				case 'linkage':
					let c1, c2, c3;
					let list = this.linkList;
					c1 = _this.data[0][arr[0]] || _this.data[0][0];
					c2 = _this.data[1][arr[1]] || _this.data[1][0];
					if (this.level == 3) {
						c3 = _this.data[2][arr[2]] || _this.data[2][0];
						if (c1.label != checkArr[0]) {
							arr[1] = 0;
							arr[2] = 0;
							_this.data[1] = list[arr[0]].children;
							_this.data[2] = list[arr[0]].children[arr[1]].children;
							c2 = _this.data[1][arr[1]] || _this.data[1][0];
							c3 = _this.data[2][arr[2]] || _this.data[2][0];
						}
						if (c2.label != checkArr[1]) {
							arr[2] = 0;
							_this.data[2] = list[arr[0]].children[arr[1]].children;
							c3 = _this.data[2][arr[2]] || _this.data[2][0];
						}
						_this.checkArr = [c1.label, c2.label, c3.label];
						_this.checkValue = [
							_this.data[0][arr[0]] ? _this.data[0][arr[0]].value : _this.data[0][0].value,
							_this.data[1][arr[1]] ? _this.data[1][arr[1]].value : _this.data[1][0].value,
							_this.data[2][arr[2]] ? _this.data[2][arr[2]].value : _this.data[2][0].value
						];
						_this.resultStr = c1.label + c2.label + c3.label;
					} else {
						if (c1.label != checkArr[0]) {
							_this.data[1] = list[arr[0]].children;
							arr[1] = 0;
							c2 = _this.data[1][arr[1]] || _this.data[1][0];
						}
						_this.checkArr = [c1.label, c2.label];
						_this.checkValue = [
							_this.data[0][arr[0]] ? _this.data[0][arr[0]].value : _this.data[0][0].value,
							_this.data[1][arr[1]] ? _this.data[1][arr[1]].value : _this.data[1][0].value
						];
						_this.resultStr = c1.label + c2.label;
					}
					break;
				case 'region':
					province = _this.data.provinces[arr[0]] || _this.data.provinces[0];
					city = _this.data.citys[arr[1]] || _this.data.citys[0];
					if (!_this.hideArea) {
						area = _this.data.areas[arr[2]] || _this.data.areas[0];
					}

					if (province.label != checkArr[0]) {
						_this.data.citys = citys[arr[0]] || citys[0];
						if (!_this.hideArea) {
							_this.data.areas = areas[arr[0]][0] || areas[0][0];
						}
						arr[1] = 0;
						arr[2] = 0;
						city = _this.data.citys[arr[1]] || _this.data.citys[0];
						if (!_this.hideArea) {
							area = _this.data.areas[arr[2]] || _this.data.areas[0];
						}
					}
					if (city.label != checkArr[1] && !_this.hideArea) {
						_this.data.areas = areas[arr[0]][arr[1]] || areas[0][0];
						arr[2] = 0;
						area = _this.data.areas[arr[2]] || _this.data.areas[0];
					}
					if (!_this.hideArea) {
						_this.checkArr = [province.label, city.label, area.label];
						_this.checkValue = [
							_this.data.provinces[arr[0]] ? _this.data.provinces[arr[0]].value : _this.data.provinces[0].value,
							_this.data.citys[arr[1]] ? _this.data.citys[arr[1]].value : _this.data.citys[0].value,
							_this.data.areas[arr[2]] ? _this.data.areas[arr[2]].value : _this.data.areas[0].value
						];
						_this.resultStr = province.label + city.label + area.label;
					} else {
						_this.checkArr = [province.label, city.label];
						_this.checkValue = [
							_this.data.provinces[arr[0]] ? _this.data.provinces[arr[0]].value : _this.data.provinces[0].value,
							_this.data.citys[arr[1]] ? _this.data.citys[arr[1]].value : _this.data.citys[0].value
						];
						_this.resultStr = province.label + city.label;
					}
					break;
				case 'selector':
					_this.checkArr = _this.data[arr[0]] || _this.data[_this.data.length - 1];
					_this.resultStr = _this.data[arr[0]] ? _this.data[arr[0]].label : _this.data[_this.data.length - 1].label;
					break;
				case 'mlabel':
					_this.checkArr = _this.data[arr[0]] || _this.data[_this.data.length - 1];
					_this.resultStr = _this.data[arr[0]] ? _this.data[arr[0]].label : _this.data[_this.data.length - 1].label;
					break;
			}
			_this.$nextTick(() => {
				_this.pickVal = arr;
			});
		},
		initData() {
			let _this = this;
			let data = {};
			let mode = _this.mode;
			let year, month, day, hour, minute, second, province, city, area;
			let col1, col2, col3;
			let dVal = [];
			switch (mode) {
				case 'linkage':
					let init;
					if (_this.value) {
						init = _this.getLinkageVal(_this.value, true);
					} else {
						init = _this.getLinkageVal(_this.defaultVal);
					}
					dVal = init.dval;
					data = init.data;
					_this.checkArr = init.checkArr;
					_this.checkValue = init.checkValue;
					_this.resultStr = init.resultStr;
					break;
				case 'region':
					if (_this.areaCode) {
						dVal = _this.getRegionVal(_this.areaCode, true);
					} else {
						dVal = _this.getRegionVal(_this.defaultVal);
					}
					if (_this.hideArea) {
						data = {
							provinces: provinces,
							citys: citys[dVal[0]]
						};
					} else {
						data = {
							provinces: provinces,
							citys: citys[dVal[0]],
							areas: areas[dVal[0]][dVal[1]]
						};
					}
					break;
				case 'selector':
					let idx = 0;
					data = _this.selectList;
					_this.selectList.map((v, k) => {
						if (v.label == this.defaultVal[0]) {
							idx = k;
						}
					});
					dVal = [idx];
					break;
				case 'mlabel':
					let idx2 = 0;
					data = _this.selectList;
					_this.selectList.map((v, k) => {
						if (v.label == this.defaultVal[0]) {
							idx2 = k;
						}
					});
					dVal = [idx2];
					break;

				case 'limit':
					data = initPicker.limit.init(_this.dayStep, _this.startHour, _this.endHour, _this.minuteStep, _this.afterStep, this.defaultVal);
					dVal = data.defaultVal || _this.defaultVal;
					break;
				case 'limitHour':
					data = initPicker.limitHour.init(_this.dayStep, this.defaultVal);
					dVal = data.defaultVal || _this.defaultVal;
					break;
				case 'range':
					data = initPicker.range.init(_this.startYear, _this.endYear, _this.useCurrent(), _this.current);
					dVal = data.defaultVal || _this.defaultVal;
					break;
				default:
					data = initPicker.date.init(_this.startYear, _this.endYear, _this.mode, _this.step, _this.useCurrent(), _this.current, _this.disabledAfter);
					dVal = data.defaultVal || _this.defaultVal;
					break;
			}
			_this.data = data;
			switch (mode) {
				case 'limitHour':
					col1 = data.date[dVal[0]] || data.date[data.date.length - 1];
					col2 = data.areas[dVal[2]] || data.areas[data.areas.length - 1];
					col3 = data.hours[dVal[1]] || data.hours[data.hours.length - 1];
					_this.checkArr = [col1, col2, col3];
					_this.resultStr = `${col1.value + ' ' + col2.label + ' ' + col3.label + '时'}`;
					break;
				case 'limit':
					col1 = data.date[dVal[0]] || data.date[data.date.length - 1];
					col2 = data.hours[dVal[1]] || data.hours[data.hours.length - 1];
					col3 = data.minutes[dVal[2]] || data.minutes[data.minutes.length - 1];
					_this.checkArr = [col1, col2, col3];
					_this.resultStr = `${col1.value + ' ' + col2.value + ':' + col3.value + ':' + '00'}`;
					break;
				case 'range':
					let fYear = data.fyears[dVal[0]] || data.fyears[data.fyears.length - 1];
					let fmonth = data.fmonths[dVal[1]] || data.fmonths[data.fmonths.length - 1];
					let fday = data.fdays[dVal[2]] || data.fdays[data.fdays.length - 1];
					let tYear = data.tyears[dVal[4]] || data.tyears[data.tyears.length - 1];
					let tmonth = data.tmonths[dVal[5]] || data.tmonths[data.tmonths.length - 1];
					let tday = data.tdays[dVal[6]] || data.tdays[data.tdays.length - 1];
					_this.checkArr = [fYear, fmonth, fday, tYear, tmonth, tday];
					_this.resultStr = `${fYear + '-' + fmonth + '-' + fday + '至' + tYear + '-' + tmonth + '-' + tday}`;
					break;
				case 'half':
					year = data.years[dVal[0]] || data.years[data.years.length - 1];
					month = data.months[dVal[1]] || data.months[data.months.length - 1];
					day = data.days[dVal[2]] || data.days[data.days.length - 1];
					area = data.areas[dVal[3]] || data.areas[data.areas.length - 1];
					_this.checkArr = [year, month, day, area];
					_this.resultStr = `${year + '-' + month + '-' + day + ' ' + area.label}`;
					break;
				case 'date':
					year = data.years[dVal[0]] || data.years[data.years.length - 1];
					month = data.months[dVal[1]] || data.months[data.months.length - 1];
					day = data.days[dVal[2]] || data.days[data.days.length - 1];
					_this.checkArr = [year, month, day];
					_this.resultStr = `${year + '-' + month + '-' + day}`;
					break;
				case 'yearMonth':
					year = data.years[dVal[0]] || data.years[data.years.length - 1];
					month = data.months[dVal[1]] || data.months[data.months.length - 1];
					_this.checkArr = [year, month];
					_this.resultStr = `${year + '-' + month}`;
					break;
				case 'dateTime':
					year = data.years[dVal[0]] || data.years[data.years.length - 1];
					month = data.months[dVal[1]] || data.months[data.months.length - 1];
					day = data.days[dVal[2]] || data.days[data.days.length - 1];
					hour = data.hours[dVal[3]] || data.hours[data.hours.length - 1];
					minute = data.minutes[dVal[4]] || data.minutes[data.minutes.length - 1];
					second = data.seconds[dVal[5]] || data.seconds[data.seconds.length - 1];
					_this.resultStr = `${year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second}`;
					_this.checkArr = [year, month, day, hour, minute];
					break;
				case 'time':
					hour = data.hours[dVal[0]] || data.hours[data.hours.length - 1];
					minute = data.minutes[dVal[1]] || data.minutes[data.minutes.length - 1];
					second = data.seconds[dVal[2]] || data.seconds[data.seconds.length - 1];
					_this.checkArr = [hour, minute, second];
					_this.resultStr = `${hour + ':' + minute + ':' + second}`;
					break;
				case 'region':
					province = data.provinces[dVal[0]];
					city = data.citys[dVal[1]];
					if (!_this.hideArea) {
						area = data.areas[dVal[2]];
						_this.checkArr = [province.label, city.label, area.label];
						_this.checkValue = [province.value, city.value, area.value];
						_this.resultStr = province.label + city.label + area.label;
					} else {
						_this.checkArr = [province.label, city.label];
						_this.checkValue = [province.value, city.value];
						_this.resultStr = province.label + city.label;
					}
					break;
				case 'selector':
					_this.checkArr = data[dVal[0]] || data[data.length - 1];
					_this.resultStr = data[dVal[0]].label || data[data.length - 1].label;
					break;
				case 'mlabel':
					_this.checkArr = data[dVal[0]] || data[data.length - 1];
					_this.resultStr = data[dVal[0]].label || data[data.length - 1].label;
					break;
			}
			_this.$nextTick(() => {
				_this.pickVal = dVal;
			});
		}
	},
	mounted() {
		this.initData();
	}
};
</script>

<style lang="scss">
.su-picker {
	position: fixed;
	z-index: 888;

	.mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s ease;
	}

	.mask.show {
		visibility: visible;
		opacity: 1;
	}

	.su-picker-cnt {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.su-picker-cnt.show {
		transform: translateY(0);
	}

	.su-picker-hd {
		display: flex;
		align-items: center;
		padding: 0 30upx;
		height: 88upx;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 32upx;
		justify-content: space-between;

		.su-picker-btn {
			font-size: 30upx;
		}

		.su-picker-btn.cancel {
			color: #101010;
		}
	}

	.su-picker-hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e1e1e1;
		color: #e1e1e1;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.su-picker-item {
		text-align: center;
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30upx;
		color: #101010;
	}
	
	.su-picker-item2 {
		background-color: #eee;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.su-picker-view {
		width: 100%;
		height: 476upx;
		overflow: hidden;
		background-color: #fff;
		z-index: 666;
	}

	picker-view {
		height: 100%;
	}
}
</style>
